/*
 * @Descripttion: your project
 * @Author: Liujiaqing
 * @Date: 2022-02-10 14:43
 * @LastEditors: Liujiaqing
 * @LastEditTime: 2022-02-10 14:43
 */
import { Button, Form } from 'antd';
import React from 'react';
import '../style.less';
interface IRightRegisterSuccessProps {
    title?: string;
    onChangeStep?: (num?: number) => void;
    onChangeStatus: (status: string) => void;
}
const RightRegisterSuccess = (props: IRightRegisterSuccessProps) => {
    const { title, onChangeStep, onChangeStatus } = props;
    const [num, setNum] = React.useState<number>(5);
    const onClickGoBack = React.useCallback(() => {
        onChangeStatus('logined');
        onChangeStep && onChangeStep(); // step重置
    }, [onChangeStatus, onChangeStep]);
    React.useEffect(() => {
        let mysum = 5;
        const timeId: any = setInterval(() => {
            if (mysum === 0) {
                clearInterval(timeId);
                onClickGoBack();
            } else {
                mysum--;
                setNum(mysum);
            }
        }, 1000);
    }, [onClickGoBack]);
    return (
        <div className="right-content-container">
            <div className="content-title">{title ? title : '注册成功'}</div>
            <img src={require('../../../assets/imgs/register-success.png')} alt="" className="content-img" />
            <Form wrapperCol={{ span: 14, offset: 0 }} layout={'vertical'} style={{ marginTop: '24px' }}>
                <Form.Item>
                    <div className="content-flex">
                        <Button type="primary" htmlType="submit" size="middle" className="content-btn" onClick={onClickGoBack}>
                            返回登录
                        </Button>
                    </div>
                </Form.Item>
            </Form>
            <div className="bottom-tips">{num}秒后自动跳转</div>
        </div>
    );
};
export default RightRegisterSuccess;
